<template>
	<view>
		<!-- <cu-custom bgColor="bg-Midnight-Blue" v-if="changing == 2"></cu-custom> -->
		<view style="width: 100%;height: 150rpx;" v-if="changing == 2"></view>
		<view class="toptitle">
			<view class="action" style="margin-left: 30rpx;">
				<view class="image" @click="myinfo">
					<image style="width: 100%;height: 100%;border-radius: 100rpx;border: 1rpx solid;" :src="userinfo.avatar ? userinfo.avatar : 'https://video-source.obs.cn-north-4.myhuaweicloud.com/img/default_user.jpg'"></image>
				</view>
				<view class="text">{{userinfo.nickname ? userinfo.nickname : '未登录'}}</view>
			</view>
			<view class="content">
				<view style="color: #1eebe6;">
					{{minute}}
					<text style="font-size: 24rpx;color: white;">后自动更新</text>
					<text style="margin-left: 10rpx;" class="cuIcon-refresh text-turquoise" @click="refreshPage"></text>
				</view>
			</view>
			<view class="action" style="margin-right: 30rpx;">
				<text class="cuIcon-search text-white" style="font-size: 30px;margin-right: 15rpx;" @click="seek"></text>
				<view class="aaa" @click="wen_post"></view>
				<!-- <view class="Points_button bbb" @tap="showModal" data-target="menuModal"></view> -->
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal" v-if="!checkstatus">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-list menu text-left solid-top" style="padding: 15rpx;">
					<view style="width:95%;border-radius:10rpx;margin:15rpx auto 20rpx;">
						<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
							:circular="true" :autoplay="true" interval="5000" duration="500">
							<swiper-item v-for="(item,index) in swiperList" :key="index">
								<image :src="item.smallimage" mode="aspectFill"></image>
								<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
							</swiper-item>
						</swiper>
					</view>
					<view
						style="width:95%;height:460rpx;border-radius:10rpx;margin:10rpx auto 20rpx;border: 4rpx #112858 solid;"
						v-if="herald.length <= 0" @click="broadcast(1,0,0,0)">
						<view
							style="width: 100%;height: 150rpx;margin: auto;display: flex;justify-content: center;margin-top: 100rpx;">
							<image src="@/static/zhi.png" style="width: 20%;height: 100rpx;"></image>
						</view>
						<view style="font-size: 45rpx;font-weight: bold;text-align: center;">{{title}}</view>
					</view>
					<view
						style="width:95%;height:460rpx;border-radius:10rpx;margin:10rpx auto 20rpx;border: 4rpx #112858 solid;"
						v-else @click="broadcast(2,herald[0].id,herald[0].is_member_expire,herald[0].channels_id)">
						<view style="width: 100%;height: 350rpx;margin: auto;padding: 10rpx;">
							<image :src="herald[0].image" style="width: 100%;height: 350rpx;border-radius:10rpx;">
							</image>
						</view>
						<view style="font-size: 45rpx;font-weight: bold;padding: 25rpx 0 0 25rpx;">
							{{herald[0].title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import forum from '@/api/forum.js';
	export default {
		props: ['changing'],
		name: "app-head",
		data() {
			return {
				token: '',
				userinfo: [],
				fid: 0,
				minute: '00:10:00',
				countdown: 600,
				countdownInterval: null,
				swiperList: [],
				herald: [],
				modalName: null,
				dotStyle: false,
				checkstatus:uni.getStorageSync('checkstatus'),
				title: uni.getStorageSync('title'),
			};
		},
		created() {
			this.userinfo = uni.getStorageSync('userinfo');
			const token = uni.getStorageSync('token');
			this.token = token
			this.fid = uni.getStorageSync('fid');
			this.buttonText = `${this.countdown}`;
			this.countdownInterval = setInterval(() => {
				this.countdown--;
				this.minute = this.formatTime(this.countdown)
				this.buttonText = `${this.countdown}`;
				if (this.countdown <= 0) {
					this.countdownInterval = null;
					this.buttonText = '00:10:00';
					this.countdown = 600;
					this.$emit('refresh-page');
				}
			}, 1000);
		},
		methods: {
			seek() {
				uni.navigateTo({
					url: '/pages/index/seek'
				});
			},
			myinfo() {
				uni.navigateTo({
					url: '/pages/index/myinfo'
				});
			},
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = seconds % 60;
				const formattedMinutes = String(minutes).padStart(2, '0');
				const formattedSeconds = String(remainingSeconds).padStart(2, '0');
				const formattedTime = `00:${formattedMinutes}:${formattedSeconds}`;
				return formattedTime;
			},
			showModal(e) {
				this.modalName = 'menuModal' 
				forum.get_management({
					token: this.token,
				}).then(res => {
					if (res.code == 1) {
						this.swiperList = res.data
					}
				})
				forum.getLiveForeshow().then(res => {
					if (res.code == 1) {
						this.herald = res.data
					}
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			broadcast(type, id, is_member_expire, channels_id) {
				uni.setStorageSync('livetype', type);
				uni.setStorageSync('liveid', id);
				uni.setStorageSync('channels_id', channels_id);
				uni.navigateTo({
					url: '/pages/index/livbroadcast'
				});
			},
			wen_post() {
				forum.getWebConfig().then(res => {
					if (res.code == 1) {
						uni.setStorageSync('fid',res.data.web_plate_post_quora_channels_id);
						uni.redirectTo({
							url: '/pages/middle/home',
						});
					}
				})
			},
			refreshPage() {
				this.$emit('refresh-page');
			},
		}
	}
</script>

<style>
	.text {
		color: white;
		width: 100rpx;
		margin-left: 30rpx;
	}
	
	.toptitle {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100rpx;
		border: 5rpx white solid;
		background-image: url('/static/tabbar/about_cur.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.aaa {
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
		background-image: url('/static/tabbar/wen.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.bbb {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
		background-image: url('/static/zhibo.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.action {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>